// 专题
<template>
  <div class="topic">
    <ul>
      <li v-for="item in topicArr" :key="item.id">
        <img v-lazy="item.scene_pic_url" alt="" />
        <p>{{ item.title }}</p>
        <p class="title">{{ item.subtitle }}</p>
        <span>{{ item.price_info | formatPrice }}</span>
      </li>
    </ul>
    <!-- 分页 -->
    <van-pagination
      v-model="currentPage"
      :page-count="totalPages"
      mode="simple"
      @change="changePage"
    />
  </div>
</template>

<script>
import { GetTopicApi } from "@/https/http";
export default {
  data() {
    return {
      topicArr: [], // 专题页数据
      currentPage: 1, //当前页数
      totalPages: "", //总页数
      size: 10,
    };
  },
  created() {
    // 初始化调用
    this.getdata()
  },
  mounted() {},
  methods: {
    changePage() {
      // 切换页码调用
      // console.log(this.currentPage);
      this.getdata()
    },
    getdata() {
      // 请求数据封装
      GetTopicApi({ page: this.currentPage, size: this.size }).then((res) => {
        this.topicArr = res.data.data;
        this.totalPages = res.data.totalPages;
      });
    },
  },
};
</script>

<style lang='less' scoped>
.topic {
  padding-bottom: 100px;
  box-sizing: border-box;
  img {
    width: 100%;
    display: block;
  }
  li{
    background-color: #fff;
    text-align: center;
    padding-bottom: 0.26667rem;
    margin-bottom: 0.53333rem;
  }
  p{
    font-size: 0.48rem;
    margin: 0.26667rem 0;
  }
  .title{
    font-size: 0.42667rem;
    margin: 0.53333rem 0;
    color: #1f1f1f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  span{
    color: #9b0000;
    margin-bottom: 0.26667rem;
  }
}
</style>
